<template>
 <div style="background-color: #001529;">
    <el-menu
        :default-active="activeIndex"
        @open="handleOpen"
        @close="handleClose"
        :router="true"
        background-color="#FFFFFF"
  >
    <div v-for="menu in menuArr" :key="menu.path">
        <el-sub-menu v-if="menu.children" :index="menu.path">
        <template #title>
            <i :class="menu.icon"></i>
            <span>{{ menu.name }}</span>
        </template>
        <MenuTree :menuData="menu.children" />
        </el-sub-menu>
        <el-menu-item v-else :index="menu.path">
        <i :class="menu.icon"></i>
        <template #title>{{ menu.name }}</template>
        </el-menu-item>
    </div>
  </el-menu>
 </div>
</template>

<script setup>
import { ref ,defineProps} from 'vue';
import MenuTree from './MenuTree.vue';
const activeIndex = ref('1')

defineProps({
  isCollapse :{
        type : Boolean,
        default : false
    },
    activeIndex : {
        type : String,
        default : '1'
    },
    menuArr :{
        type : Array
    }
})
const emits = defineEmits(["handleOpen"])
const handleOpen = () => {
    emits("handleOpen")
}
const handleClose = () => {
    emits("handleClose")
}
</script>

<style scoped>
.el-menu-vertical-demo {
  /* border-right: none; */
}
</style>